feat: add rank change indicators to leaderboard#95
Conversation
|
Thank you for submitting a pull request. Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully. A maintainer will review your submission shortly. |
jagdish-15
added
type:feature
jagdish-15
left a comment
jagdish-15
left a comment
There was a problem hiding this comment.
The rank change indicator would fit better visually if it appeared after the user's name instead of directly beside the rank number.
Also for [NEW], use the same dimmed styling/intensity as the [==] indicator so it doesn't visually overpower the actual rank changes, and [new] would probably feel more subtle than [NEW].
About implementation logic, the rank change indicators themselves should ideally compare against the previous day's final leaderboard snapshot rather than just the immediately previous sync. That would make the movement indicators more stable and meaningful overall.
The immediately previous sync comparison could instead be better suited for the live sync-diff popup feature being discussed separately in issue #111, since that feature is specifically about showing what changed in the latest sync cycle.
|
/format |
|
I have successfully run Prettier and pushed the formatting fixes to this PR. Note for Contributors: Because this commit was pushed by a bot, GitHub will not automatically re-run the CI checks. To trigger them to pass, you must either:
|
2 participants
Description
Adds rank change indicators to each leaderboard row showing movement since the last sync. Each row now displays [+N] in green (moved up), [-N] in red (dropped), [==] in dim (no change), or [NEW] in amber (first appearance), consistent with the terminal theme.
Linked Issue
Fixes #71
Changes Made
1.Added computeRankChanges() helper in scripts/sync-leaderboard.js that reads the existing leaderboard JSON before overwriting it, computes rank delta per user, and writes a rankChange field into the output JSON for all 4 tabs (overall, daily, weekly, monthly)
2.Added getRankChangeTag() in frontend/leaderboard.html that renders the indicator as a styled inline span
3.Injected the indicator into both desktop rows and mobile cards next to the rank number
Added CSS classes rank-up, rank-down, rank-neutral, rank-new using existing CSS variables
Type of Change
Testing
Checklist
Screenshots / Screen Recording
Note: Rank change indicators are populated by the sync script at each sync cycle. Since the live JSON does not yet contain rankChange data, the screenshot above was captured by injecting mock values via DevTools console to verify the UI renders correctly. Indicators will appear automatically on the live leaderboard after the next sync runs with the updated script.